


        main .classify{
            margin-top: 144px;
            margin-bottom: 108px;
        }
        main .classify .contn{
            position: relative;
        }
        main .classify .contn.pc{
            justify-content: space-between;
        }
        main .classify .contn.pc::after{
            content: '';
            position: absolute;
            height: 1px;
            width: 100%;
            bottom: 0px;
            left: 0px;
            background: #969696;
        }
        main .classify .contn.pc .c{
            position: relative;
            padding: 24px 0px;
            color: #969696;
            cursor: pointer;
            transition: color .3s cubic-bezier(.365,.305,0,1);
        }
        main .classify .contn.pc .c p{
            display: inline-block;
        }
        main .classify .contn.pc .c::after{
            content: '';
            display: none;
            position: absolute;
            width: 100%;
            height: 2px;
            background: #010101;
            bottom: 0px;
            left: 0px;
            z-index: 2;
        }
        main .classify .contn.pc .c:hover,
        main .classify .contn.pc .c.active{
            color: #010101;
        }
        main .classify .contn.pc .c.active::after{
            display: block;
        }
        main .classify .c sup{
            position: relative;
            top: 2px;
            left: -2px;
            font-size: 12px;
            line-height: 12px;
        }
        main .classify .contn.mobile select{
            border-bottom: 1px solid #010101;
            padding: 8px 0px;
            font-size: 16px;
        }
        main .classify .contn.mobile img{
            position: absolute;
            top: 50%;
            right: 12px;
            width: 12px;
            transform: translateY(-50%);
        }

        main .headTtl{
            padding-bottom: 108px;
        }
        main .headTtl>*{
            width: 50%;
            padding-left: 108px;
        }
        
        main .headTtl h1{
            margin-bottom: 60px;
        }
        main .headTtl .desc .name{
            font-size: 18px;
            margin-bottom: 18px;
        }
        main .headTtl .desc .txt{
            max-width: 345px;
            margin-bottom: 48px;
        }
        main .headTtl .desc a{
            width: 280px;
            line-height: 60px;
            display: block;
            text-align: center;
            position: relative;
            color: #fff;
            font-size: 14px;
            z-index: 2;
        }
        main .headTtl .desc a::after{
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            border-radius: 60px;
            background: #010101;
            transition: transform .3s cubic-bezier(.365,.305,0,1);
            transform: scale(1);
            z-index: -1;
        }
        main .headTtl .desc a:hover::after{
            transform: scale(1.1);
        }

        main .swiperList .swiper{
            position: relative;
            margin-bottom: 145px;
        }
        main .swiperList .swiper .horLine{
            position: absolute;
            bottom: 0px;
        }
        main .swiperList .swiper:nth-child(odd) .horLine{
            left: 0px;
        }
        main .swiperList .swiper:nth-child(even) .horLine{
            right: 0px;
        }
        main .swiperList .swiper:nth-child(odd) .contn{
            padding-left: 25%;
        }
        main .swiperList .swiper:nth-child(even) .contn{
            padding-right: 25%;
        }
        main .swiperList .swiper .contn .txt .name{
            font-size: 21px;
            line-height: 36px;
            margin-bottom: 21px;
        }
        main .swiperList .swiper .contn .txt .details{
            max-width: 640px;
        }
        main .swiperList .swiper .contn .itmInfSwiper .pic{
            position: relative;
            padding-bottom: 56%;
        }
        main .swiperList .swiper .contn .itmInfSwiper .pic img{
            position: absolute;
            left: 0px;
        }
        main .swiperList .swiper .contn .swiperBox{
            position: relative;
            margin: 48px 0px;
            cursor: grab;
        }
        main .swiperList .swiper .contn .swiperBox .details{
            font-size: 14px;
            color: #969696;
        }
        main .swiperList .swiper .contn .swiperBox .btns{
            position: absolute;
            top: 0px;
            right: 0px;
            background: #fff;
            z-index: 2;
        }
        main .swiperList .swiper .contn .swiperBox .btns p{
            padding: 25px 40px;
            transition: background .15s ease;
        }
        main .swiperList .swiper .contn .swiperBox .btns p:hover{
            background: rgba(0,0,0,.1);
        }
        main .swiperList .swiper .contn .swiperBox .add{
            width: 40px;
            height: 40px;
            overflow: hidden;
            border-radius: 50%;
            background: #fff;
            position: absolute;
            z-index: 2;
            top: 20px;
            left: 20px;
            opacity: 0;
            transform: scale(0);
            transition: opacity .25s cubic-bezier(.365,.305,0,1),transform .25s cubic-bezier(.365,.305,0,1);
        }
        main .swiperList .swiper .contn .swiperBox .add span{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 30%;
            height: 1px;
            background: #010101;
            transform: translate(-50%,-50%);
        }
        main .swiperList .swiper .contn .swiperBox .add span:last-child{
            height: 30%;
            width: 1px;
        }
        main .swiperList .swiper .contn .swiperBox:hover .add{
            transform: scale(1);
            opacity: 1;
        }

        main .scalePalace{
            z-index: 100;
            pointer-events: none;
            width: 100%;
            height: 100vh;
            position: fixed;
            top: 0px;
            left: 0px;
            opacity: 0;
            transform: translateX(-20%);
            transition: transform .25s cubic-bezier(.365,.305,0,1),opacity .15s cubic-bezier(.365,.305,0,1);
        }
        main .scalePalace::after{
            content: '';
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background: #000;
            transform: translateX(-100%);
            transition: transform .25s cubic-bezier(.365,.305,0,1);
        }
        main .scalePalace.active{
            opacity: 1;
            transform: translateX(0%);
            pointer-events: all;
            transition-duration: .5s;
            transition-delay: .2s;
        }
        main .scalePalace.active::after{
            transform: translateX(0%);
            transition-duration: .5s;
        }
        main .scalePalace .box{
            flex-direction: column;
            position: relative;
            height: 100%;
            padding-left: 190px;
        }
        main .scalePalace .box .details{
            box-sizing: content-box;
            padding-top:  36px;
            padding-bottom: 24px;
            min-height: 84px;
        }
        main .scalePalace .box .details h3{
            color: #fff;
        }
        main .scalePalace .box .details p{
            color: #636363;
        }
        main .scalePalace .box .swiperBox{
            flex: 1;
        }
        main .scalePalace .box .swiperBox .scaleSwiper,
        main .scalePalace .box .swiperBox .scaleSwiper .pic{
            height: 100%;
        }
        main .scalePalace .box .swiperBox .details{
            display: none;
        }
        main .scalePalace .box .close{
            margin: 48px;
            width: 48px;
            height: 48px;
            position: absolute;
            top: 0px;
            right: 0px;
            border: 1px solid #636363;
            border-radius: 50%;
            opacity: .5;
        }
        main .scalePalace.active .box .close{
            opacity: 1;
        }
        main .scalePalace .box .close span{
            position: absolute;
            width: 17px;
            height: 1px;
            top: 50%;
            left: 50%;
            background: #636363;
        }
        main .scalePalace .box .close span:first-child{
            transform: translate(-50%,-50%) rotate(45deg);
        }
        main .scalePalace .box .close span:last-child{
            transform: translate(-50%,-50%) rotate(-45deg);
        }
        main .scalePalace .box .btns,
        main .scalePalace .box .pages{
            width: 190px;
            position: absolute;
            left: 0px;
        }
        main .scalePalace .box .btns{
            top: 24px;
            padding-top: 24px;
        }
        main .scalePalace .box .btns .next{
            margin-left: 36px;
        }
        main .scalePalace .box .close:hover,
        main .scalePalace .box .btns p:hover{
            opacity: .5 !important;
        }
        main .scalePalace .box .pages{
            bottom: 36px;
            align-items: flex-start;
            height: 48px;
            color: #636363;
        }
        main .scalePalace .box .pages .length::before{
            content: '/';
        }
        main .scalePalace .box .pages .current{
            font-size: 36px;
            color: #fff;
            line-height: 1.35;
        }
        

        @media(max-width:1600px){
            main .classify{
                margin-top: 120px;
                margin-bottom: 90px;
            }
            main .classify .contn.pc .c{
                padding: 20px 0px;
            }

            main .headTtl{
                padding-bottom: 90px;
            }
            main .headTtl>*{
                padding-left: 90px;
            }
            main .headTtl h1{
                margin-bottom: 50px;
            }
            main .headTtl .desc .name{
                margin-bottom: 16px;
            }
            main .headTtl .desc .txt{
                max-width: 290px;
                margin-bottom: 40px;
            }
            main .headTtl .desc a{
                width: 240px;
                line-height: 48px;
                font-size: 12px;
            }
            main .swiperList .swiper{
                margin-bottom: 120px;
            }
            main .swiperList .swiper .contn .txt .details{
                max-width: 400px;
            }
            main .swiperList .swiper .contn .txt .name{
                font-size: 18px;
                line-height: 30px;
                margin-bottom: 18px;
            }
            main .swiperList .swiper .contn .swiperBox{
                margin: 40px 0px;
            }
            main .swiperList .swiper .contn .swiperBox .details{
                font-size: 12px;
            }

            main .scalePalace .box{
                padding-left: 160px;
            }
            main .scalePalace .box .details{
                padding-top:  30px;
                padding-bottom: 20px;
                min-height: 70px;
            }
            main .scalePalace .box .close{
                margin: 40px;
                width: 40px;
                height: 40px;
            }
            main .scalePalace .box .btns,
            main .scalePalace .box .pages{
                width: 160px;
            }
            main .scalePalace .box .btns{
                top: 20px;
                padding-top: 20px;
            }
            main .scalePalace .box .btns .next{
                margin-left: 30px;
            }
            main .scalePalace .box .pages{
                bottom: 30px;
            }
            main .scalePalace .box .pages .current{
                font-size: 30px;
            }
        }

        @media(max-width:1200px){
            main .classify{
                margin-top: 112px;
                margin-bottom: 84px;
            }
            main .classify .contn.pc .c{
                padding: 17px 0px;
            }

            main .headTtl{
                padding-bottom: 84px;
            }
            main .headTtl>*{
                padding-left: 84px;
            }
            main .headTtl h1{
                margin-bottom: 37px;
            }
            main .headTtl .desc .name{
                margin-bottom: 14px;
            }
            main .headTtl .desc .txt{
                max-width: 270px;
                margin-bottom: 37px;
            }
            main .headTtl .desc a{
                width: 220px;
                line-height: 42px;
            }

            main .swiperList .swiper{
                margin-bottom: 110px;
            }
            main .swiperList .swiper .contn .txt .details{
                max-width: 370px;
            }
            main .swiperList .swiper .contn .txt .name{
                font-size: 16px;
                line-height: 28px;
                margin-bottom: 16px;
            }
            main .swiperList .swiper .contn .swiperBox{
                margin: 37px 0px;
            }
            main .scalePalace .box .details{
                padding-top:  28px;
                padding-bottom: 18px;
                min-height: 65px;
            }
            main .scalePalace .box{
                padding-left: 150px;
            }
            main .scalePalace .box .details{
                padding-top:  28px;
                padding-bottom: 18px;
                min-height: 65px;
            }
            main .scalePalace .box .close{
                margin: 36px;
                width: 36px;
                height: 36px;
            }
            main .scalePalace .box .btns,
            main .scalePalace .box .pages{
                width: 150px;
            }
            main .scalePalace .box .btns{
                top: 18px;
                padding-top: 18px;
            }
            main .scalePalace .box .btns .next{
                margin-left: 28px;
            }
            main .scalePalace .box .pages{
                bottom: 24px;
            }
            main .scalePalace .box .pages .current{
                font-size: 28px;
            }
        }

        @media(max-width:1024px){
            main .classify{
                margin-top: 26px;
                margin-bottom: 78px;
            }

            main .headTtl{
                padding-bottom: 78px;
            }
            main .headTtl>*{
                padding-left: 78px;
            }
            main .headTtl h1{
                margin-bottom: 34px;
            }
            main .headTtl .desc .name{
                margin-bottom: 12px;
            }
            main .headTtl .desc .txt{
                max-width: 250px;
                margin-bottom: 34px;
            }
            main .headTtl .desc a{
                width: 220px;
            }


            main .swiperList .swiper .horLine{
                opacity: 0;
            }
            main .swiperList .swiper{
                margin-bottom: 100px;
            }
            main .swiperList .swiper .contn{
                padding: 0px !important;
            }
            main .swiperList .swiper .contn .txt .details{
                max-width: 345px;
            }
            main .swiperList .swiper .contn .txt .name{
                font-size: 15px;
                line-height: 26px;
                margin-bottom: 14px;
            }
            main .swiperList .swiper .contn .swiperBox{
                margin: 34px 0px;
                margin-left: -25px !important;
                margin-right: -25px !important;
                padding: 0px 25px;
            }
            main .swiperList .swiper .contn .swiperBox .itmInfSwiper{
                overflow: visible;
            }
            main .swiperList .swiper .contn .swiperBox .btns{
                display: none;
            }

            main .scalePalace{
                display: none; 
            }
        }
        @media(min-width:768px){
            main .classify .contn.mobile{
                display: none;
            }
        }
        @media(max-width:767px){
            main .classify{
                margin-top: 24px;
                margin-bottom: 48px;
            }
            main .classify .contn.pc{
                display: none;
            }

            main .headTtl{
                padding-bottom: 72px;
                display: block;
            }
            main .headTtl>*{
                width: 100%;
                padding-left: 25px;
            }
            main .headTtl h1{
                margin-bottom: 32px;
            }
            main .headTtl .desc .txt{
                max-width: 100%;
            }
            main .headTtl .desc a{
                width: 210px;
            }
            
            main .swiperList .swiper{
                margin-bottom: 90px;
                overflow: hidden;
            }
            main .swiperList .swiper .contn .txt .details{
                max-width: 350px;
            }
            main .swiperList .swiper .contn .txt .name{
                font-size: 17px;
                line-height: 28px;
                margin-bottom: 17px;
            }
            main .swiperList .swiper .contn .swiperBox{
                margin: 32px 0px;
            }
        }